<!--
 * @Author: vectorwings
 * @Email: vectorwings@163.com
 * @GitHub: https://github.com/vector-wings/
 * @Company: Copyright 2019 HuaZhuTech, Inc.
 * @Date: 2019-10-26 10:16:31
 * @LastEditors: vectorwings
 * @LastEditTime: 2019-10-26 16:59:38
 * @Description: 审批工作-详情-整改责任人
 -->

<template>
  <section class="card">
    <section class="item">
      <p>现场照片</p>
      <img v-if="scenePhotos !== null" preview="0" :src="scenePhotos" class="pic"/>
			<span v-else>暂无照片</span>
    </section>
    <hr class="hr"/>
		<section class="item">
      <p>整改结果描述</p>
      <p>{{rectDesc}}</p>
    </section>
		<section class="item-2">
			<p>问题闭合</p>
			<p>是</p>
		</section>
		<section class="item-3">
			<p>申请人：</p>
			<avatar-name :name="applyUserName"></avatar-name>
		</section>
		<hr class="hr"/>
		<section class="item-3" style="margin-bottom: 0.2rem;">
			<p>申请时间：{{applyTime}}</p>
		</section>
		<section class="item-4">
			<mt-button type="default" size="large" @click="handleBtnClick(0)">同意</mt-button>
			<span style="width: 0.1rem;"></span>
			<mt-button type="primary" size="large" @click="handleBtnClick(1)">拒绝</mt-button>
		</section>
  </section>
</template>

<script>
import { AvatarName } from '../../../../components/widgets'
export default {
	name: "rectification-responsible-person-card",
	components: {
		AvatarName
	},
  props: {
		scenePhotos: String,
		rectDesc: String,
		applyUserName: String,
		applyTime: String
	},
	methods: {
		handleBtnClick (tag) {
			this.$emit('do', tag);
		}
	}
};
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0.14rem;
  background-color: #ffffff;

  .item {
    width: 100%;
		margin-bottom: 0.16rem;

    p:nth-child(1) {
      margin-bottom: 0.1rem;
			font-size: 0.14rem;
			line-height: 0.14rem;
			color: #222222;
    }

		p:nth-child(2) {
			margin: 0;
			font-size: 0.12rem;
			line-height: 0.12rem;
			color: #888888;
		}
  }

	.item-2 {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.16rem;

		p {
			font-size: 0.14rem;
			line-height: 0.14rem;
			color: #222222;
    }
	}

	.item-3 {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		p {
			font-size: 0.14rem;
			line-height: 0.14rem;
			color: #222222;
    }
	}

	.item-4 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;

		.btn {
			background-color: #FFFFFF;
		}
	}
}

.pic {
  width: 100%;
  height: 1.7rem;
  padding: 0.1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.hr {
  width: 100%;
  height: 0.01rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  border: 0;
  background-color: #efefef;
}

p {
  margin: 0;
}

hr {
  margin: 0;
}
</style>>
